<template>
  <div>
    <div class="topmsg">
      <div>状态:{{ res.state | statename }}</div>
      <div>快递公司:{{ res.com | comname }}</div>
      <div>单号:{{ res.nu }}</div>
      <div>预计到达时间:{{ res.arrivalTime }}时</div>
    </div>
    <div class="bottomtable">
      <el-table :data="res.data" >
        <el-table-column prop="time" label="日期" width="180"> </el-table-column>
        <el-table-column prop="context" label="事件"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// 引用json
import logistics from "@/json/logistics.json";

export default {
  name: "projectinfo",

  props: {
    res: {
      type: Object,
      default: () => ({}),
    },
  },
  filters: {
    // 过滤器
    // 快递公司
    comname: function (value) {
      let name = value;
      logistics.forEach((item) => {
        if (item.code == value) {
          name = item.name;
        }
      });
      return name;
    },
    statename: function (value) {
      let name = value;
      switch (value * 1) {
        case 0:
          name = "在途中";
          break;
        case 1:
          name = "已揽收";
          break;
        case 2:
          name = "疑难件";
          break;
        case 3:
          name = "已签收";
          break;
        case 4:
          name = "已退签";
          break;
        case 5:
          name = "派件中";
          break;
        case 6:
          name = "已退回";
          break;
        default:
          name = "未知";
          break;
      }
      return name;
    },
  },
  data() {
    return {};
  },
  mounted() {

  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.topmsg {
  display: flex;
  justify-content: space-evenly;
  padding: 0 10px;
  margin-bottom: 10px;
  div:nth-child(1) {
    font-weight: bold;
  }
}
.bottomtable{
  width: 100%;
  background-color: red;
  // height: 300px;
}
</style>
